<template>
  <view class="page">
    <Header> </Header>
    <view class="main_container">
      <view class="main_content">
        <Breadcrumb
          :text="'个人评测-场景口语-场景选择-话题选择-' + article.topicTitle"
        >
        </Breadcrumb>
        <view class="content">
          <Listen
            ref="listen"
            :articleInfo="article"
            :list="sentenceList"
            @view="hanldeView"
          ></Listen>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { findSceneSentenceList } from "@/api/spoken";
export default {
  components: {},
  beforeRouteLeave(to, from, next) {
    this.$refs.listen.suspend();
    next();
  },
  data() {
    return {
      sceneId: "",
      topicId: "",
      sentenceList: [],
      article: {},
    };
  },
  onLoad(option) {
    this.sceneId = option.sceneId;
    this.topicId = option.topicId;
    this.init();
  },
  methods: {
    init() {
      let params = {
        id: this.topicId,
      };
      findSceneSentenceList(params).then((res) => {
        this.sentenceList = res.data.list;
        this.article = res.data.article;
      });
    },
    hanldeView() {
      uni.navigateTo({
        url: `/pages/scene/SceneDetail?sceneId=${this.sceneId}&topicId=${this.topicId}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./sceneListen";
</style>
